<template>
    <div class="all">
        <div class="content">
            <el-form ref="form" :model="farmList" label-width="80px" style="margin:20px 15px ">
                <el-form-item label="名称:">
                    <el-input v-model="farmList.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="logo:">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        drag
                        :action="action"
                        :headers="{ Authorization: 'Bearer ' + token }"
                        :before-upload="beforeUpload"
                        :on-change="onChange"
                        :on-remove="onRemove"
                        :limit="1"
                        v-model="farmList"
                        :on-exceed="more"
                        :multiple="false">
                        <div style="margin-top: 60px;">
                            <i class="el-icon-circle-plus" style="font-size: 20px"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <div v-if="show" style="color: #606292">{{ farmList.logo }}
                        <el-button type="text" @click="delImg" size="small" style="margin-left: 20px;">删除</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="关键字:">
                    <el-input v-model="farmList.keyword" size="small"></el-input>
                </el-form-item>
                <el-form-item label="描述:">
                    <el-input v-model="farmList.description" type="textarea" :rows="4" size="small"></el-input>
                </el-form-item>
                <el-form-item label="地址:">
                    <el-input v-model="farmList.address" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div style="display: flex;justify-content: space-between;margin-right: 50px;padding-bottom: 40px">
                <div></div>
                <div>
                    <el-button type="success" @click="reset" size="small">重置</el-button>
                    <el-button type="primary" @click="save" size="small">保存</el-button>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import {getBgPage, updateBgPage} from "@/index/api/index/setting/bg/bgPage/bgPage"
import {mapState} from "vuex";

export default {
    computed: {
        ...mapState(["token", "action"]),
    },
    data() {
        return {
            form: {
                size: 10,
                page: 1,
                total: 0,
                keyword: null
            },
            farmList: {},
            show: true
        };
    },
    mounted() {
        this.getFarmList()
    },
    methods: {
        beforeUpload(file) {
            // 检查文件类型和大小
            const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt500k = file.size / 1024 < 500;

            if (!isJPGorPNG) {
                this.$message.error('只能上传 JPG/PNG 格式的图片!');
            }
            if (!isLt500k) {
                this.$message.error('上传图片大小不能超过 500KB!');
            }
            return isJPGorPNG && isLt500k;
        },
        more() {
            this.$message.warning('最多上传1张图片')
        },
        onChange(file, fileList) {
            if (file.status === 'success' && fileList.length > 0) {
                this.$message.success('上传成功');
                this.farmList.logo = file.name
                this.show = false
            }
        },
        onRemove(file, fileList) {
            if (file.status === 'success') {
                this.$message.success('删除成功')
            }
        },
        getFarmList() {
            getBgPage(this.form).then(res => {
                if (res.code == 200) {
                    this.farmList = res.data
                }
            })
        },
        reset() {
            this.$refs.upload.clearFiles();
            this.getFarmList()
            this.show = true
        },
        save() {
            updateBgPage(this.farmList).then(res => {
                if (res.code == 200) {
                    this.$message.success('保存成功')
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        delImg(){
            this.show = false
            this.$refs.upload.clearFiles();
            this.farmList.logo = ''

            this.$message.success('删除成功')
        }

    },
}
</script>

<style lang="less" scoped>
.all {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;

    .content {
        width: 100%;
        // height: 45vh;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;

        .top {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .el-button {
                margin-right: 3vw;
            }
        }
    }
}

</style>
